/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

/**
 * Colors
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-brand: #f58517;
  --vp-c-brand-light: var(--vp-c-brand);
  --vp-c-brand-lighter: var(--vp-c-brand);
  --vp-c-brand-lightest: var(--vp-c-brand);
  --vp-c-brand-dark: #854811;
  --vp-c-brand-darker: var(--vp-c-brand-dark);
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
  --vp-c-brand-1: var(--vp-c-brand);
  --vp-c-brand-2: #f3c796;
  --vp-badge-tip-text: var(--vp-c-indigo-1);

  --twoslash-popup-bg: var(--vp-c-brand);
}

.dark {
  --vp-c-bg: rgba(35, 39, 47, 0.6);
  --vp-local-search-bg: rgba(35, 39, 47, 1);
  --vp-sidebar-bg-color: rgba(35, 39, 47, 0.8);
  --vp-c-gutter: rgba(35, 39, 47, 0.4);
  --vp-c-bg-soft: rgba(68, 76, 91, 0.3);
  --vp-nav-screen-bg-color: rgba(35, 39, 47, 1);
  --vp-sidebar-bg-color: rgba(35, 39, 47, 1);

  --twoslash-popup-bg: rgba(35, 39, 47, 0.9);
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #f58517 30%, #f7797d);

  --vp-home-hero-image-background-image: linear-gradient(-45deg, rgb(245, 133, 23) 50%, rgb(227, 192, 157) 50%);
  --vp-home-hero-image-background-image-invert: linear-gradient(-90deg, rgb(245, 133, 23) 50%, rgb(227, 192, 157) 50%);
  --vp-home-hero-image-filter: blur(40px);

  --red: #ff6565;
  --pink: #ff64f9;
  --purple: #6b5fff;
  --blue: #4d8aff;
  --green: #5bff89;
  --yellow: #ffee55;
  --orange: #ff6d1b;
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
  .VPHero .text {
    font-size: 50px;
  }
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
 * Animations
 */

@keyframes spin {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 200%;
  }
}

/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand) !important;
}

.details a {
  color: var(--vp-c-brand);
}

.new {
  border-color: var(--vp-badge-tip-border);
  color: var(--vp-badge-tip-text);
  background-color: var(--vp-badge-tip-bg);
  display: inline-block;
  margin-left: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 8px;
  line-height: 18px;
  font-size: 12px;
  font-weight: 600;
}

.beta {
  border-color: var(--vp-badge-warning-border);
  color: var(--vp-badge-warning-text);
  background-color: var(--vp-badge-warning-bg);
  display: inline-block;
  margin-left: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 8px;
  line-height: 18px;
  font-size: 12px;
  font-weight: 600;
}

.code {
  border-radius: 4px;
  padding: 3px 6px;
  color: var(--vp-c-text-code);
  background-color: var(--vp-c-mute);
  transition:
    color 0.5s,
    background-color 0.5s;
}
.learn-more {
  position: absolute;
  bottom: 0;
}

.item .VPFeature {
  transition:
    transform 0.25s ease 0s,
    filter 0.25s ease 0s,
    box-shadow 0.25s ease 0s;
}
.item .VPFeature:hover {
  box-shadow: 0 25px 65px 0px rgba(0, 0, 0, 0.35);
}

.vp-code-group .tabs {
  gap: 0.3rem;
}

.vp-code-group .tabs label {
  display: flex;
  align-items: baseline;
}

.vp-doc h1 a {
  text-decoration: none;
}

.vp-doc h1 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.vp-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.vp-doc h3 {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.vp-code-group .tabs img {
  padding-left: 0.5rem;
  align-items: center;
  font-size: 15px;
  height: 15px;
}

.VPLink p.text img {
  display: inline-block;
  margin-left: 0.3rem;
  height: 16px;
}

.vp-doc tr.transposed-table:nth-child(2n) {
  background: transparent;
}

.vp-doc tr.transposed-table:nth-child(2n + 1) {
  background: var(--vp-c-bg-soft);
}

.vp-doc tr.transposed-table > th {
  white-space: nowrap;
}

.dark #VPSidebarNav > .group:nth-child(-n + 9):not(:first-child) > .VPSidebarItem > .item > .text::before {
  filter: invert(1);
}

svg[id^="mermaid-"] {
  line-height: 1.5;
  background-color: transparent !important;
}

svg[id^="mermaid-"] .edgeLabel {
  padding: 0 !important;
}

svg[id^="mermaid-"] .cluster rect {
  fill: rgba(185, 185, 185, 0.14) !important;
  stroke: rgba(185, 185, 185, 0.54) !important;
}

.dark svg[id^="mermaid-"] .flowchart-link {
  stroke: lightgrey !important;
}

.dark svg[id^="mermaid-"] .marker {
  stroke: lightgrey !important;
  fill: lightgrey !important;
}

.dark svg[id^="mermaid-"] .edgeLabel p {
  background-color: #585858 !important;
}

.dark svg[id^="mermaid-"] span {
  color: #ccc !important;
}

/*#VPSidebarNav > .group > .VPSidebarItem > .item > .text {*/
/*  display: flex;*/
/*  align-items: center;*/
/*}*/

/*#VPSidebarNav > .group > .VPSidebarItem > .item > .text::before {*/
/*  margin-right: .5rem;*/
/*  display: block;*/
/*  height: 1rem;*/
/*  width: 1rem;*/
/*  background-size: cover;*/
/*  content: "";*/
/*}*/

/*#VPSidebarNav > .group:nth-child(2) > .VPSidebarItem > .item > .text::before {*/
/*  background-image: url(/icons/getting-started.svg);*/
/*}*/

/*#VPSidebarNav > .group:nth-child(3) > .VPSidebarItem > .item > .text::before {*/
/*  background-image: url(/icons/parser.svg);*/
/*}*/

/*#VPSidebarNav > .group:nth-child(4) > .VPSidebarItem > .item > .text::before {*/
/*  background-image: url(/icons/helpers.svg);*/
/*}*/

/*#VPSidebarNav > .group:nth-child(5) > .VPSidebarItem > .item > .text::before {*/
/*  background-image: url(/icons/plugins.svg);*/
/*}*/
/*#VPSidebarNav > .group:nth-child(6) > .VPSidebarItem > .item > .text::before {*/
/*  background-image: url(/icons/gear.svg);*/
/*}*/

a.sponsor {
  /* .VPButton */
  display: inline-block;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  transition:
    color 0.25s,
    border-color 0.25s,
    background-color 0.25s;
  /* .VPButton.medium */
  border-radius: 20px;
  padding: 0 20px;
  line-height: 30px;
  font-size: 14px;
  text-decoration: none;
  /* .VPButton.sponsor */
  border-color: var(--vp-button-sponsor-border);
  color: var(--vp-button-sponsor-text);
  background-color: var(--vp-button-sponsor-bg);
}

a.sponsor:hover {
  /* .VPButton.sponsor:hover */
  border-color: var(--vp-button-sponsor-hover-border);
  color: var(--vp-button-sponsor-hover-text);
  background-color: var(--vp-button-sponsor-hover-bg);
}

a.fancy-sponsor {
  border: calc(0.08 * 2rem) solid transparent;
  position: relative;
  color: var(--vp-c-text-1);
  border-radius: calc(0.7 * 2rem);
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0 15px;
  font-size: 14px;
  line-height: 30px;
  background:
    linear-gradient(var(--vp-button-alt-hover-bg), var(--vp-button-alt-hover-bg)),
    linear-gradient(var(--vp-button-alt-hover-bg) 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)),
    linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  background-size: 200%;
  z-index: 0;
}

a.fancy-sponsor:hover {
  animation: spin 0.5s infinite linear;
}
